<v-container fluid grid-list-md text-xs-center :style="{width:size * 8 + 'px', height:height + 'px'}" style="padding:0%;touch-action: none;">
  <v-btn fixed left top fab outlined color="primary" @click="context.mode=3" :style="{width:size+'px', height:size+'px'}">
    <v-icon :size="size * 0.6">assignment</v-icon>
  </v-btn>
  <v-layout row wrap>
    <v-flex xs12 style="display: flex">
      <template v-for="(group, i) in context.algs">
        <v-btn
          class="title"
          :color="index.group == i?'primary':''"
          depressed
          style="text-transform:none; min-width: 0%; min-height: 0%; margin: 0%; padding: 0%; height: 2em; flex: 1"
          @click="tabs(i);"
        >
          {{index.group==i?(progress != 0?'':name):group.name}}
          <v-icon large v-show="index.group == i && (progress != 0)">replay</v-icon>
        </v-btn>
      </template>
    </v-flex>
    <v-flex xs12>
      <v-text-field
        style="text-transform:none;padding-left: 2%;padding-right: 2%;"
        dense
        class="title"
        single-line
        hide-details
        outlined
        :disabled="playing"
        :append-icon="exp==origin?'':'settings_backup_restore'"
        @click:append="exp=origin"
        v-model="exp"
      >
      </v-text-field>
    </v-flex>
    <v-flex xs12 style="padding-left: 5%; padding-right: 5%">
      <v-slider style="margin: 0%" readonly hide-details :thumb-label="progress!=0?'always':false" ticks="always" v-model="progress" :max="actions.length">
        <template v-slot:thumb-label>{{progress==0?'#':actions[progress - 1].value}}</template>
      </v-slider>
    </v-flex>
    <v-flex xs12 style="display: flex">
      <v-flex>
        <v-btn
          block
          text
          large
          @click="move(-1)"
          style="margin: 0%; padding: 0%;"
        >
          <v-icon large>skip_previous</v-icon>
        </v-btn>
      </v-flex>
      <v-flex>
        <v-btn block text large :disabled="progress==0" @click="backward" style="margin: 0%; padding: 0%;">
          <v-icon large>fast_rewind</v-icon>
        </v-btn>
      </v-flex>
      <v-flex>
        <v-btn block text large :disabled="progress == actions.length" @click="toggle" style="margin: 0%; padding: 0%;">
          <v-icon large>{{playing?'pause':'play_arrow'}}</v-icon>
        </v-btn>
      </v-flex>
      <v-flex>
        <v-btn block text large :disabled="progress == actions.length" @click="forward" style="margin: 0%; padding: 0%;">
          <v-icon large>fast_forward</v-icon>
        </v-btn>
      </v-flex>
      <v-flex>
        <v-btn block text large @click="move(1)" style="margin: 0%; padding: 0%;">
          <v-icon large>skip_next</v-icon>
        </v-btn>
      </v-flex>
    </v-flex>
  </v-layout>
</v-container>
